<template name="zpicker">
	<view class="picker-view">
		<!-- <text class="question">{{que}}<text class="tip" v-if="!empty">*</text></text> -->
		<view class="uni-list theme-input" style="width:99%">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left normal-font-size">
                    当前选择
                </view>
                <view class="uni-list-cell-db">
                    <picker @change="rc" :value="index" :range="choices" style="width:100%">
                        <view class="uni-input theme-input normal-font-size">{{choices[index]}}</view>
                    </picker>
                </view>
            </view>
		</view>
		<text class="tip" v-if="errorText.length>0">{{errorText}}</text>
		
	</view>
</template>

<script>
	export default {
		name : "zpicker",
		data() {
			return {
				errorText : "",
				index : 0
			};
		},
		props : {
			compType : {
				type : String,
				default : "zpicker"
			},
			choices : {
				type : Array,
				// value : true，
				default : true
			},
			empty : {
				type : Boolean,
				default : false
			},
			que : {
				type : String,
				default : "问题"
			}
		},
		methods: {
			
			get : function(){
				if(this.empty == false && this.index == -1){
					this.errorText = "内容不可为空";
					return null;
				}
				return this.choices[this.index];
			},
			rc : function(e) {
				this.index = e.target.value
				// this.value = evt.target.value;
			}
		}
	}
</script>

<style>
	@import "../../../common/zcss.css";
	.picker-view{
		flex-direction: column;
	}
	.question{
		display: inline;
		font-size: 15upx;
	}
	/* #answer-view{
		flex-direction: row;
	} */
	.tip{
		padding-top: 5upx;
		margin-left: 5upx;
		color: red;
		font-size: 30upx;
	}
</style>
